<template>
  <div>
    <div class="fixedFill-mx"></div>
    <!--top-->
    <div class="top-header border-bottom fixed-top">
      <div class="top-back">
        <a href="javascript:void(0)" @click="back">返回</a>
      </div>
      <h2 class="f36 color-000">完善资料</h2>
    </div>
     <!--风控警告提示 mt-97  -->
    <FkRemind class="mt-97"></FkRemind>
    <div class="order-container px-30 Mmt-79 bg-fff border-bottom" >
      <span class="span-icon-red-tip f32 color-000">为确保出售成功，请填写本人的联系方式</span>
    </div>
    <div class="order-container px-30 bg-fff border-bottom">
      <span class="span-icon-xinhao f32 color-000">手机号</span>
      <!--<input class="f34 fontarial" maxlength='11' type="tel" placeholder="请输入您的手机号" v-model="common.phone">-->
      <v-input
         inputClass="f34 fontarial"
         inputType="tel"
         :maxlength="11"
         inputPlaceholder="请输入您的手机号"
         @writing="writing.phone = true"
         v-model.trim="common.phone"></v-input>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="(showHint || writing.phone) && (common.phone.length === 0 || common.phone == 0 || !telTrue)">
      <p class="f24 px-30">请输入正确的手机号</p>
    </div>
    <div class="order-container bg-fff border-bottom">
      <span class="span-icon-xinhao f32 color-000">QQ号</span>
      <!--<input class="f32 color-000 fontarial" maxlength='14' type="tel" placeholder="请输入您的QQ号" v-model="common.qq">-->
      <v-input
         inputClass="f32 color-000 fontarial"
         inputType="tel"
         :maxlength="11"
         inputPlaceholder="请输入您的QQ号"
         @writing="writing.qq = true"
         v-model.trim="common.qq"></v-input>
    </div>
    <!--提示-->
    <div class="contaner-qq fw border-bottom" v-if="(showHint || writing.qq) && common.qq.length < 5">
      <p class="f24 px-30">请输入正确的QQ号</p>
    </div>
    <!-- 实名认证 -->
    <div v-if="!isBindIdNumber">
      <div class="order-container bg-fff f30 border-bottom mt-20 border-top"><i class="tip"></i> <span>为了您的资金安全，请填写本人真实信息</span>
      </div>
      <div class="order-container bg-fff border-bottom"><span class="span-icon-xinhao f32 color-000">真实姓名</span> <input
         maxlength="14" type="text" placeholder="请输入您的真实姓名" v-model.trim="name"></div>
      <!--提示-->
      <div class="contaner-qq fw border-bottom" v-if="showHint && !name.length">
        <p class="f24 px-30">请输入真实姓名</p>
      </div>
      <div class="order-container bg-fff border-bottom"><span class="span-icon-xinhao f32 color-000">身份证号</span> <input
         maxlength="18" type="text" placeholder="请输入您的真实身份证号" v-model.trim="code"></div>
      <!--提示-->
      <div class="contaner-qq fw border-bottom" v-if="showHint && code.length !== 18">
        <p class="f24 px-30">请输入身份证号</p>
      </div>
      <div class="text-center color-m1 line-h46 f30 py-20">
        信息请认真填写，提交后如需修改<br>需提供本人真实信息资料
      </div>
    </div>
    <!--底部确认是否发布商品-->
    <div class="release mt-20 trlect-btn border">
      <a class="next" href="JavaScript:void(0)" @click="confirm">
        <input class="bg-f54" type="button" name="" value="确认完成">
      </a>
    </div>
  </div>
</template>

<script>
  import inputCom from './input.vue';
   import FkRemind from 'components/common/FkRemind';
  export default {
    components: {
      'v-input': inputCom,
      FkRemind
    },
    props: ['common', 'isBindIdNumber', 'writing'],
    data() {
      return {
        showHint: false,
        name: '', // 姓名
        code: '' ,// 身份证号
        
      }
    },
    computed: {
      telTrue() {
        if(!(/^1[34578]\d{9}$/.test(this.common.phone))){
          return false;
        }
        return true
      }
    },
    methods: {
     
      back() {
        this.$emit('writePhoneQQBack')
      },
      /* 确认完成 */
      confirm() {
        /* 手机号和QQ号校验 */
        if (this.common.phone.length < 11 || this.common.qq.length < 5) {
          this.showHint = true
          return
        }
        /* 姓名和身份证校验 */
        if (!this.isBindIdNumber && (!this.name.length || this.code.length !== 18)) return
        /* 手机号码校验 */
        if(!this.telTrue) return
        if(this.isBindIdNumber) {
          this.$emit('writePhoneQQConfirm')
        } else {
          this.$indicator.open()
          this.$http.post('/api/mobile-user-service/rs/account/saveMainUserInfo', {idNumber: this.code, realName: this.name}).then(res => {
            console.log(res)
            if(res.data.success) {
              this.$indicator.close()
              this.$emit('changeBind') // 改变绑定状态
              this.$emit('writePhoneQQConfirm')
            } else {
              this.$indicator.close()
              this.$toast(res.data.responseStatus.message)
            }
          })
        }
      }
    }
  }
</script>


